<script setup>
import { dutyEditFormatServe } from '@/api/duty'
import { useFormatStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'

const formatStore = useFormatStore()
const { format } = storeToRefs(formatStore)
const getFormat = () => {
  formatStore.getFormat()
}
/*时间段设置*/
const dialogVisibleSetTime = ref(false)
const setFormat = ref([])
const onSetTime = () => {
  setFormat.value = JSON.parse(JSON.stringify(format.value))
  dialogVisibleSetTime.value = true
}
const onSubmitSetTime = async () => {
  await ElMessageBox.confirm('确定修改时间段吗？', '温馨提醒', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  })
  await dutyEditFormatServe({ record: setFormat.value })
  ElMessage.success({ message: '修改成功', offset: 70 })
  dialogVisibleSetTime.value = false
  getFormat()
}
defineExpose({
  onSetTime
})
</script>

<template>
  <el-dialog v-model="dialogVisibleSetTime" title="设置值班时间段" width="50%">
    <div v-for="(item, index) in setFormat" :key="index" style="margin-bottom: 15px">
      <span style="margin-right: 20px">{{ '时段' + item.index }}</span>
      <span>开始时间:</span>
      <el-time-select
        v-model="item.start"
        style="width: 240px; margin-right: 20px; margin-left: 5px"
        :max-time="item.end"
        class="mr-4"
        placeholder="Start time"
        start="7:00"
        step="1:00"
        end="22:00"
      />
      <span>结束时间:</span>
      <el-time-select
        v-model="item.end"
        style="width: 240px; margin-left: 5px"
        :min-time="item.start"
        placeholder="End time"
        start="7:00"
        step="1:00"
        end="22:00"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisibleSetTime = false">取消</el-button>
        <el-button type="primary" size="default" @click="onSubmitSetTime">提交修改</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="" scoped></style>
